<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="ex" uri="/WEB-INF/tld/showInformation.tld"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="UTF-8">
  <title>薪酬管理系统--管理员</title>
  <link rel="stylesheet" type="text/css"
        href="/resources/css/styleSheet.css">
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
        crossorigin="anonymous">
  <link
          href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
          rel="stylesheet">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script
          src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="padding-top: 10%;background-size: cover;">
<ex:Banner/>
<!-- 这里之后改一下 -->
<c:if test="${not empty admin}">


  <!--页面中心内容-->
  <div class="row">
    <div class="col-sm-2">
      <!--菜单组件：手风琴 panel-group容器-->
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <!--面板-->
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
              <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                员工管理
              </a>
            </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
              <!--嵌套列表组-->
              <ul class="list-group">
                <li class="list-group-item"><a href="http://localhost:8080/admin/checkAllEmployees">员工信息</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/admin/payForEmployees">薪资发放</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/admin/checkAllSalary">薪资列表</a></li>

              </ul>
            </div>
          </div>
        </div>

        <!--面板-->
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="empTitle">
            <h4 class="panel-title">
              <a role="button" data-toggle="collapse" data-parent="#accordion" href="#empContent" aria-expanded="true" aria-controls="collapseOne">
                部门管理
              </a>
            </h4>
          </div>
          <div id="empContent" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
              <!--嵌套列表组-->
              <ul class="list-group">
                <a href="${pageContext.request.contextPath}/admin/checkAllDepart" class="list-group-item list-group-item-action">部门信息</a>
                <a href="${pageContext.request.contextPath}/admin/getOneInfo" class="list-group-item list-group-item-action">部门结构</a>

              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="col-sm-10">
      <!-- 按钮 -->
      <div class="row">
        <div class="col-3">
          <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#myModal">添加员工</button>
        </div>
        <div class="col-9">
          <form class="row" action="http://localhost:8080/admin/findEmployeeByKeys" method="get">
            <div class="col-auto">

              <input type="text" class="form-control" id="keys" name="keys" placeholder="支持用户名，全名搜索">
            </div>
            <div class="col-auto">
              <button type="submit" class="btn btn-primary mb-3">查询</button>
            </div>
          </form>

        </div>

      </div>

      <!-- 模态框（Modal）显示报错信息 -->
      <div class="row">
        <div class="col-8">
        <div class="alert" id="messageAlert" role="alert">
            ${message.message}
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        </div>
      </div>


      <!-- 添加员工模态窗 -->
      <div class="modal fade" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <!-- 模态窗头部 -->
            <div class="modal-header">
              <h4 class="modal-title">添加员工</h4>
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <!-- 模态窗主体 -->
            <form action="http://localhost:8080/admin/addEmployee" method="POST">
            <div class="modal-body">

                <div class="form-group">
                  <label for="username">用户名:</label>
                  <input type="text" class="form-control" id="username" name="username">
                </div>
                <div class="form-group">
                  <label for="departmentId">部门id:</label>
                  <input type="text" class="form-control" id="departmentId" name="departmentId">
                </div>
                <div class="form-group">
                  <label for="level">等级:</label>
                  <select class="form-control" id="level" name="levelId">
                    <option value="1">等级 1</option>
                    <option value="2">等级 2</option>
                    <option value="3">等级 3</option>
                    <!-- 添加更多等级选项 -->
                  </select>
                </div>



            </div>
            <!-- 模态窗底部 -->
            <div class="modal-footer">
              <button type="submit" class="btn btn-primary">提交</button>
              <button type="button" class="btn btn-danger" data-dismiss="modal">退出</button>
            </div>
            </form>
          </div>
        </div>
      </div>



      <div role="tabpanel" class="tab-pane" id="profile">
        <!--栅格布局-->
        <!--用户表格-->
        <div class="row" style="margin-top: 30px">
          <div class="col-sm-11">
            <table class="table table-bordered table-hover table-striped">
              <tr>
                <th style="text-align: center; white-space: nowrap;">序号</th>
                <th style="text-align: center; white-space: nowrap;">用户名</th>
                <th style="text-align: center; white-space: nowrap;">全名</th>
                <th style="text-align: center; white-space: nowrap;">入职时间</th>
                <th style="text-align: center; white-space: nowrap;">邮箱</th>
                <th style="text-align: center; white-space: nowrap;">电话号码</th>
                <th style="text-align: center; white-space: nowrap;">部门</th>
                <th style="text-align: center; white-space: nowrap;">职级</th>
                <th style="text-align: center; white-space: nowrap;">生日</th>
                <th style="text-align: center; white-space: nowrap;">工资卡号</th>
                <th style="text-align: center; white-space: nowrap;">在职状态</th>
                <th style="text-align: center; white-space: nowrap;">薪资查看</th>
                <th style="text-align: center; white-space: nowrap;">操作</th>
              </tr>
              <c:forEach items="${employeeList.items}" var="employee" varStatus="ItemLoopCount">
                <tr>
                  <td style="text-align: center; white-space: nowrap;">${ItemLoopCount.count}</td>
                  <td style="text-align: center; white-space: nowrap;">${employee.username}</td>
                  <td style="text-align: center; white-space: nowrap;">${employee.fullname}</td>
                  <td style="text-align: center; white-space: nowrap;">${employee.employTime}</td>
                  <td style="text-align: center; white-space: nowrap;">${employee.email}</td>
                  <td style="text-align: center; white-space: nowrap;">${employee.phoneNumber}</td>
                  <td style="text-align: center; white-space: nowrap;">${employee.departmentName}</td>
                  <td style="text-align: center; white-space: nowrap;">${employee.levelName}</td>
                  <td style="text-align: center; white-space: nowrap;">${employee.birthday}</td>
                  <td style="text-align: center; white-space: nowrap;">${employee.bankAccount}</td>
                  <c:if test="${employee.isExpire == 1}"><td style="text-align: center; white-space: nowrap;">已离职</td></c:if>
                  <c:if test="${employee.isExpire != 1}"><td style="text-align: center; white-space: nowrap;">在职</td></c:if>
                  <td style="text-align: center; white-space: nowrap;">
                    <form action="http://localhost:8080/admin/findSalaryByKeys" method="GET">
                      <input type="hidden" name="keys" value="${employee.username}" />
                      <input type="submit" value="查看工资" class="btn btn-warning" />
                    </form>
                  </td>
                  <td style="display: flex;text-align: center; white-space: nowrap;">
                    <form action="http://localhost:8080/admin/deleteEmployee" method="POST">
                      <input type="hidden" name="username" value="${employee.username}" />
                      <input type="submit" value="删除" class="btn btn-danger" />
                    </form>

                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#updateModal${employee.username}">修改</button>

                    <div class="modal fade" id="updateModal${employee.username}">
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <!-- 模态窗头部 -->
                          <div class="modal-header">
                            <h4 class="modal-title">修改员工信息</h4>
                            <button type="button" class="close" data-dismiss="modal">×</button>
                          </div>
                          <!-- 模态窗主体 -->
                          <form action="http://localhost:8080/admin/updateEmployeeInfo" method="POST">
                            <input type="hidden" name="username" value="${employee.username}" />
                            <div class="modal-body">
                              <div class="form-group">
                                <label for="departmentId2">部门id:</label>
                                <input type="text" class="form-control" id="departmentId2" name="departmentId" />
                              </div>
                              <div class="form-group">
                                <label for="level2">等级:</label>
                                <select class="form-control" id="level2" name="levelId">
                                  <option value="1">P1</option>
                                  <option value="2">P2</option>
                                  <option value="3">P3</option>
                                  <!-- 添加更多等级选项 -->
                                </select>
                              </div>
                            </div>
                            <!-- 模态窗底部 -->
                            <div class="modal-footer">
                              <button type="submit" class="btn btn-primary">修改</button>
                              <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>



                  </td>
                </tr>
              </c:forEach>
            </table>
          </div>
        </div>






        <ul class="col-md-12">
          <div class="col-md-offset-3 col-md-2">
            <c:if test="${employeeList.previousPage}">
              <ul class="pager">
                <li><a href="http://localhost:8080/admin/checkAllEmployees?pageNo=${employeeList.currentPageNo-1}&keys=null">上一页</a></li>
              </ul>
            </c:if>
            <c:if test="${!employeeList.previousPage}">
              <ul class="pager">
                <li class="disabled">上一页</li>
              </ul>
            </c:if>
          </div>

          <div class="col-md-4">
            <nav aria-label="Page navigation">
              <ul class="pagination">
                <c:forEach begin="1" end="${employeeList.totalPageCount}" var="i">
                  <c:if test="${employeeList.currentPageNo == i}">
                    <li class="disabled">
                      <a href="http://localhost:8080/admin/checkAllEmployees?pageNo=${i}&keys=null">${i}</a>
                    </li>
                  </c:if>
                  <c:if test="${employeeList.currentPageNo != i}">
                    <li>
                      <a href="http://localhost:8080/admin/checkAllEmployees?pageNo=${i}&keys=null">${i}</a>
                    </li>
                  </c:if>
                </c:forEach>
              </ul>
            </nav>
          </div>

          <div class="col-md-2">
            <c:if test="${employeeList.nextPage}">
              <ul class="pager">
                <li><a href="http://localhost:8080/admin/checkAllEmployees?pageNo=${employeeList.currentPageNo+1}&keys=null">下一页</a></li>
              </ul>
            </c:if>
            <c:if test="${!employeeList.nextPage}">
              <ul class="pager">
                <li class="disabled">下一页</li>
              </ul>
            </c:if>
          </div>
        </ul>


      </div>


    </div>
  </div>
</c:if>

<div style="height: 300px">

</div>

<!--统一的尾部：版权信息-->
<ex:Footer/>

<!-- jQuery and JavaScript Bundle with Popper -->
<script
        src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        crossorigin="anonymous"></script>
<script
        src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        crossorigin="anonymous"></script>
<script
        src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"
        crossorigin="anonymous"></script>
<script type="text/javascript" src="script.js"></script>

<script>
  $(document).ready(function() {
    if ('${message.message}') {
      if ('${message.status}' == 0) {
        $('#messageAlert').addClass('alert-danger');
      } else if ('${message.status}' == 1) {
        $('#messageAlert').addClass('alert-success');
      }
      $('#messageAlert').show();
    } else {
      $('#messageAlert').hide();
    }
  });
</script>


</body>
</html>

